<template>
  <div id="detail">
    <detail-nav-bar class="detail-nav"></detail-nav-bar>
    <scroll class="content" ref ="scroll">
      <detail-swiper :top-images="topImages"></detail-swiper>
      <detail-base-info :goods="goods"></detail-base-info>
      <detail-shop-info :shop="shop"></detail-shop-info>
      <detail-goods-info :detail-info="detailInfo" @imageLoad ="imageLoad"></detail-goods-info>
      <detail-item-params :item-params="paramInfo"></detail-item-params>
      <detail-comment-info :comment-info="commentInfo"></detail-comment-info>
      <goods-list :goods="recommends"></goods-list>
    </scroll>
  </div>

</template>

<script>
  import DetailNavBar from "./childComponents/DetailNavBar";

  import DetailSwiper from "./childComponents/DetailSwiper";
  import DetailBaseInfo from "./childComponents/DetailBaseInfo";
  import DetailShopInfo from "./childComponents/DetailShopInfo";
  import DetailGoodsInfo from "./childComponents/DetailGoodsInfo";
  import DetailItemParams from "./childComponents/DetailItemParams";
  import DetailCommentInfo from "./childComponents/DetailCommentInfo";


  import GoodsList  from "../../components/content/goods/GoodsList";
  import Scroll from "../../components/common/scroll/Scroll";

  import { getDetail,Goods,Shop,GoodsParam,getRecommend} from "../../network/detail";

  export default {
        name: "Detail",
      data(){
          return{
            iid:null,
            topImages:[],
            goods:{},
            shop:{},
            detailInfo:{},
            paramInfo:{},
            commentInfo:{},
            recommends:[]
          }
      },
      components:{
        DetailNavBar,
        DetailSwiper,
        DetailBaseInfo,
        DetailShopInfo,
        DetailGoodsInfo,
        DetailItemParams,
        DetailCommentInfo,
        GoodsList,
        Scroll,

      },
      created() {
          //拿到商品id
          this.iid = this.$route.query.iid
        //根据商品id拿到详情
        getDetail(this.iid).then(res=>{
          console.log(res)
          //1获取顶部图片
          console.log(res.result.itemInfo.topImages);
          this.topImages = res.result.itemInfo.topImages
          //获取商品信息
          this.goods = new Goods(res.result.itemInfo,res.result.columns,res.result.shopInfo.services)
          //创建店铺信息
          this.shop = new Shop(res.result.shopInfo)
          //保存商品详情
          this.detailInfo = res.result.detailInfo
          //参数信息
          this.paramInfo = new GoodsParam(res.result.itemParams.info,res.result.itemParams.rule)
          //评论信息
          console.log(res.result.rate.cRate);
          if (res.result.rate.cRate !==0){
            this.commentInfo = res.result.rate.list[0]
          }
        }),
          getRecommend().then(res=>{
            console.log()
            this.recommends =res.data.list
          })
      },
    methods:{
      imageLoad(){
        this.$refs.scroll.refresh
      }
    }
    }
</script>

<style scoped>

  #detail{
    position: relative;
    z-index: 9;
    background-color: #ffffff;
    height: 100vh;
  }
  .detail-nav{
    position: relative;
    z-index: 9;
    background-color: #ffffff;
  }
  .content{
    height: calc(100% - 44px );
  }
</style>
